<template>
	<view class="">
		<view class="nav-content">
			<view class="index-top relative" style="background-color: #FFFFFF;">
				<view :style="{
					height:statusbarHeight
				}">

				</view>

				<view class="px-48 py-24 flex items-center justify-between nav-content-wx relative">
					<div class="" @click="$tab.back()">
						<u-icon name="arrow-left" color="#333" :bold="true"></u-icon>
					</div>
					<view class="text-333 text-44 font-500 nav-title">
						通讯录
					</view>
					<view class="relative wx-p" @click="$tab.nav('/pages/chat2/searchFriend')">
						<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_tianjiahaoyou@2x.png"
							class="image-48" mode=""></image>
					</view>
				</view>
			</view>


		</view>

		<view class="" :style="{
			height:navHeight+'px'
		}">

		</view>

		<view class="px-28">
			<view class="flex items-center mt-32" @click="$tab.nav('/pages/chat2/newFriend')">
				<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_xinpengyou@3x.png" mode=""
					style="width: 94rpx;height: 94rpx;"></image>
				<view class="ml-24" style="width: calc(100% - 104rpx);">
					<view class="flex items-center justify-between">
						<view class="text-32 text-333 font-500 ">
							新的朋友
						</view>
						<view class="px-12 text-FFF py-4 round mt-24" v-if="newFriendNum > 0" style="background: linear-gradient( 180deg, #FF561D 33%, #FF0064 100%);">
							{{newFriendNum}}
						</view>
					</view>
					<view class="line bg-F6F6F6">

					</view>
				</view>
			</view>

			<view class="flex items-center mt-32 pb-32" @click="$tab.nav('/pages/chat2/groupList')">
				<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_qunliao@3x.png" mode=""
					style="width: 94rpx;height: 94rpx;"></image>
				<view class="ml-24" style="width: calc(100% - 104rpx);">
					<view class="flex items-center justify-between">
						<view class="text-32 text-333 font-500 ">
							群聊
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bg-F8F8F8" style="height: 8px;">
		</view>

		<u-index-list :index-list="indexList" v-if="indexList.length > 0">
			<template v-for="(item, index) in itemArr">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view class="list-cell flex items-center" v-for="(cell, index) in item" :key="cell.userId"
						@click="$tab.nav(`/pages/chat2/userDetail?userId=${cell.userId}`)">
						<image :src="cell.avatar" style="width: 94rpx;height: 94rpx;border-radius: 12rpx;" mode="">
						</image>
						<view class="text-32 ml-20 font-500">
							{{cell.nickName}}
						</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>


		<IsShow :isShow="indexList.length == 0"
			isShowImg="http://api.fceos.cn/qiliaoyun/profile/appImages/states/img_wohaoyou.png" isShowText="暂无好友">
		</IsShow>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				itemArr: [],
				newFriendNum: 0,
				socketTop: 0,
				navHeight: null,
				statusbarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			}
		},
		onLoad() {

		},
		onPageScroll(e) {
			this.socketTop = e.scrollTop
		},
		onReady() {
			let view = uni.createSelectorQuery().in(this).select(".nav-content");
			view.fields({
				size: true,
				scrollOffset: true
			}, data => {
				this.navHeight = data.height
			}).exec();
		},
		onShow() {
			this.getData()
		},
		methods: {
			async getData() {
				const res = await this.$Api.chat.addressBookList()
				this.indexList = []
				this.itemArr = []
				res.data.forEach(item => {
					this.indexList.push(item.firstLetter)
					this.itemArr.push(item.userList)
				})

				const newFriendNum = await this.$Api.chat.newFriendNum()

				if (newFriendNum.data > 0) {
					let tem = newFriendNum.data > 99 ? '99+' : newFriendNum.data
					this.newFriendNum = tem
					uni.setTabBarBadge({
						index: 1,
						text: '',
						color: '#F40'
					});
				} else {
					this.newFriendNum = 0
					uni.removeTabBarBadge({
						index: 1,
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	/deep/ .u-index-anchor {
		background-color: #FFF !important;
		border: none !important;
		margin-top: 32rpx;
		padding-left: 56rpx !important;
	}

	.nav-content {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
	}

	.line {
		width: 100%;
		height: 2rpx;
		position: absolute;
		left: 0;
		bottom: -32rpx;
	}
</style>

<style lang="scss">
	/* #ifdef MP-WEIXIN */
	.nav-content-wx {
		padding: 0 48rpx;
		height: 44px;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		top: 15%;
		z-index: 9;
		transform: translateX(-50%);
	}

	.wx-p {
		padding-top: 8rpx;
	}

	/* #endif */
</style>